/* VIDEO CHAT FRAME*/
#w-vc{
    background: #161d1c fixed;
    position: absolute;
    width: 1343px;
    height: 630px;
    position: relative;
    z-index: 23;
	display: none
}

.close-app {
    background: url('../images/face-icon.png') no-repeat -805px -53px;
    border:none;
    width: 19px; height: 19px;
    position: absolute;
    top: 10px; right: 10px;
    cursor: pointer
}

.chatFrame {
    background: #E1E1E1;
   // position: absolute;
    //bottom: 0; right: 50px;
    margin: 10px 0 10px 10px;
    width: 230px;
    border: 1px solid #E1E1E1;
    float: right;
    z-index: 30
}
 
 .chatFrame .headCF{
    background: #3E78FD;
    font-size: 18px;
    color: #FFF;
    padding: 10px;
    height: 16px;
	cursor: pointer
 }
.chatFrame .headCF h3{
     float: left;
     color: #000
}

.chatFrame .headCF button.CloseCF{
    float: right;
    background: url('../images/face-icon.png') no-repeat -805px -53px;
    border:none;
    width: 19px; height: 19px;
    cursor: pointer;
}

.chatFrame .headCF span:hover{
    background: #E1E1E1;
    color: #000
}

.chatFrame .mainCF{

    background: #F1F1F1;
    height: 280px;
    overflow-x: hidden;
	word-wrap: break-word;
    overflow-y: auto
}

.chatFrame .mainCF p{ 
    padding: 5px 4px 5px 5px;
    font-size: 16px
}

.chatFrame .messageCF{
    background: #FFF;
    border-top: 1px solid #099252;
}

.chatFrame .messageCF .inputField{
    border: none;
    margin-top: 1px;
    padding: 10px 10px;
    background: #f6efef
}

.chatFrame .messageCF .show-emo{
    border: none;
    background: url('../images/icon1.png') no-repeat scroll -418px -247px transparent;
    width: 20px; height: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px; right: 10px
    
}.chatFrame .messageCF .show-emo:hover{
    border: 1px solid #E1E1E1
    }
    
/* EMOTION */
.chatFrame .emoticons {
	width: 40px
}
.chatFrame .emo-box {
    position: absolute;
    bottom: 39px; right: 0;
    left: 0;
    width: 228px;
    height: 120px;
    border: 1px solid #000;
    display: none
}

.chatFrame .emo-box img {
    width: 30px;
    cursor: pointer
}

.chatFrame .emo-box img:hover {
    box-shadow: 0 0 5px #000
}

.chatFrame .emo-box ul {
    margin: 10px
}

.chatFrame .emo-box ul li{
    float: left;
}
.chatFrame .down{
    background: url('../images/face-icon.png') no-repeat -612px -90px;
    border: none;
    width: 18px;
    height: 8px;
    position: absolute;
    bottom: -8px; right: 10px;
    
}
/* END of CHAT FRAME*/




section article#videoFrame {
    height: 600px;
    position: relative;
    top: 10px;
    overflow: hidden;
    margin: 0 150px;
}

section article#videoFrame p {
    color: #fff;
    font-size: 1.5em;
    padding: 10px;
    position: absolute;
    margin: 0 0 0 10px;
    /display: none
}

section article#videoFrame p#sourceStatus {
    top: 20px;
}

section article#videoFrame p#remoteStatus {
    bottom: 30px;
    z-index: 1
}


section article#videoFrame video#remotevid {
    z-index: 4; 
    width: 720px; height: 600px;
    background: url('../images/v-b.png');
    position: absolute;
    top: 0; left: 0px;
    z-index: 0;
}

section article#videoFrame video#sourcevid {    
    position: absolute;
    background: url('../images/v-b.png');
    top: 0px; right: 0px;
    width: 304px; height: 600px;
    z-index: 0;

}

/* BUTTON */
.btn {
    z-index: 24;
    cursor: pointer
}
#start{
    background: url('../images/face-icon.png') no-repeat -1px -369px;
    width: 94px;
    height: 130px;
    border: none;
    position: absolute;
    top: 10px;
    right: 30px; 
}

#stop, #hangup {
    background: url('../images/face-icon.png') no-repeat -806px -54px;
    width: 18px;
    height: 18px;
    border: none;
    position: absolute;
    z-index: 22222
}

#stop {
    top: 10px;
    right: 10px; }
#hangup{
    top: 10px;
    right: 320px; }

#connect {
    background: url('../images/face-icon.png') no-repeat -2px -243px;
    width: 136px;
    height: 114px;
    border: none;
    position: absolute;
    right: 360px; top: 10px
}
/* CANVAS */
#canvas{
    width: 720px;
    height: 600px;
    position: absolute;
    top: 0; left: 0px;
    background: transparent;
    z-index: 0
}

#source {
    position: absolute;
    background: transparent;
    top: 0px; right: 0px;
    width: 304px; height: 600px;
    z-index: 0;
}

/*BUTTON START*/
article ul {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index:1
}

article ul li{
    margin: 0 10px 0 0
}